<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	nav{ 
		z-index: 1;
		background-color: white;
		position: fixed;
		background-color: white;
		width: 100vw;
		height: 10vh;
		border: solid 0.1vh rgb(197, 197, 197);
		box-shadow: 0px 0px 5px 0px;

	}
	body{
		background-color: rgb(245, 246, 250);
	}
	a{
		text-decoration: none;
		color: rgb(81, 210, 197);
	}
	a:hover{
		color: rgb(105, 109, 115);
	}
	.username{
		padding-top: 4vh;
		line-height: 100%;
		font-size: 3vh;
	}
	.log{
		width: 100%;
		height: 100%;
	}
	#box{
		position: relative;
		top: 10vh;
		width: 90vw;
		margin: auto;
	}
	.f_a{
		height: 50%;
	}
	.f_img{
		position: relative;
		top: 2vh;
       height: 60px;
       width: 60px;
	}
	.box_head{
		margin-top: 2vh;
		height: 11vh;
		background-color: white;
	}
	#title{
		height: 100%;
	}
    .ellipsis{
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
	.f_right{
		height: 100%;
	}
	.context{
		background-color: white;
		border: solid 0.1vh rgb(197, 197, 197);
		position: relative;
		top: 2vh;
	}
	.right_i{
		margin-top: 2vh;
	}
	.r_img{
		height: 50vh;
	}
	#bottom{
		position: relative;
		top: 15vh;
		width: 100%;

	}
	#my_comment{
		margin-top: 2vh;
	}
	.i_btn{
		position:relative;
		bottom:2vw;
		left:25vw;
	}
	.comment{
		margin-top: 2vh;
		margin-bottom: 2vh;
	}
	.headimg{
		position: relative;
		top: -1vh;
		left: 2vw;
		width: 60px;
		height: 60px;
	}
	.pagebar{
		position: relative;
		top: 14vh;
		width: 20vw;
		margin: auto;
		margin-bottom: 2vh;
	}
</style>
<body>
	<div class="container-fluid">
		<nav class="row">
			<a class="col-md-2"><img src="img/logo.png" alt="" class="log col-md-2"></a>
		    <a class="col-md-1 username" href="#" id="index">首页</a>
		    <a class="col-md-1 username" href="#" id="return">返回</a>
	    </nav>
	    <div id="box" class="row">
	    	<div class="col-md-12 box_head row">
	    		<h3 class="col-md-7" id="title">帖子标题</h3>
	    	    <div class="col-md-4  offset-md-1 row">
	    		    <a href="" class="col-md-2 f_a" id="ai"><img src="" id="img1"class="col-md-2 f_img"></a>
	    		    <div class="col-md-10 f_right">
	    		    	<a href=""  id="a1">发帖人昵称</a><br>
                        <div style="color: rgb(197, 197, 197);" class="col-md-10 ellipsis"  id="div1"></div>
                        <input type="button" value="关注" class="btn col-md-4" style="background-color: rgb(251, 114, 153); color: white;">
	    		    </div>
	    	    </div>
	    	</div>
	    	   <div class="col-md-8 context" id="text">
	    	        帖子内容
	    	   </div>
	    	   <div class="col-md-4 row right_i">
	    	   	    <img src="img/4.jpg" alt="" class="col-md-12 r_img">
	    	   </div>
	    </div>
	    <div id="bottom" class="row">
	    	<hr class="col-md-10" style="margin: auto; color: rgb(200, 200, 200);">
	    	<div class="col-md-6 offset-md-3 row" id="my_comment">
	    		<div class="col-md-2">
	    			<a href="#"><img src="" alt="" class="headimg" id="img2"></a>
	    		</div>
	    		<div class="col-md-6 row">
	    			<input type="text" class="form-control col-md-4" placeholder="请输入您的评论" id='input1'>
	    			<input type="button" class="btn col-md-4 i_btn" value="发布评论" style="background-color: rgb(0, 174, 236); color: white;">
	    		</div>
	    	</div>
	
	    </div>
	    <div class="pageBar">
            
	    </div>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
window.onload=function(){
	searchPost();
	searchDisscus(1,6);
	userSearch();
}
var params=location.search.substring(1);

var currt=0;
function searchPost(){
	$.ajax({
		type:"POST",
		url:"somPost.do",
		data:{
			postId:params.split("&")[0].split("=")[1],
		},
		success:function(data){	
			console.log(data);
			var str=data.postTitle.split("<h3>").join("").split("</h3>").join("");
			var $p=$("<p>"+str+"</p>");
			$("#title").append($p);
			$("#text").html(data.postText);
			$.ajax({
				type:"POST",
				url:"User.do",
				data:{
					userId:data.postUserId,
				},
				success:function(data1){
					console.log(data1);
					$("#img1").attr("src",data1.userHeadImg);
					$("#a1").text(data1.userName);
					$("#a1").attr("href","userInfo.html?id="+data1.userId+"&userId="+params.split("&")[2].split("=")[1]);
					$("#ai").attr("href","userInfo.html?id="+data1.userId+"&userId="+params.split("&")[2].split("=")[1]);
					$("#div1").text(data1.individualResume);
				}
			})
		}
	})
}
function userSearch(){
	$.ajax({
		type:"POST",
		url:"User.do",
		data:{
			userId:params.split("&")[1].split("=")[1],
		},
		success:function(data1){
			$("#img2").attr("src",data1.userHeadImg);
		}
	})
}

$("#index").click(function(){
	console.log(params.split("&")[2].split("=")[1]);
	window.location.href ="index.html?Id="+params.split("&")[2].split("=")[1];
})
$("#return").click(function(){
	window.location.href =document.referrer;
})

function searchDisscus(pageNum,pageSize){
	$.ajax({
		type:"POST",
		url:"disscusById.do",
		data:{
			postId:params.split("&")[0].split("=")[1],
			pageNum:pageNum,
			pageSize:pageSize
		},
		success:function(data){
			var disscuss=data.data;
			for(var i=0;i<disscuss.length;i++){
				var dis = disscuss[i];
				seacrhsendId(dis);
				
			}
		}
	})
}

function seacrhsendId(data){
	$.ajax({
		type:"POST",
		url:"User.do",
		data:{
			userId:data.sendId,
		},
		success:function(data1){
			var $div = $("<div class='col-md-6 offset-md-3 row comment'></div>");
			var $div1 = $("<div class='col-md-2'></div>").html("<a href='#'><img src='"+data1.userHeadImg+"' alt=''class='headimg'></a>");
			var $div2= $("<div class='col-md-10 row'></div>").html("<a href='#'>"+data1.userName+"</a><br>");
			var $div3 = $("<div class='col-md-10'></div>").html(data.discussText);
			$div2.append($div3);
			$div.append($div1).append($div2).append("<hr class='col-md-10 ' style='margin: auto; color: rgb(200, 200, 200);'>");
			$("#bottom").append($div);
		}
	})
}
</script>
</html>